<template>
  <div class="viewer" ref="preview" @click="clickViewer">
    <slot></slot>
  </div>
</template>
<script>
import Viewer from "viewerjs";
import "viewerjs/dist/viewer.css";
export default {
  props: {
    options: {
      type: Object,
      default() {
        return {
          title: 2,
          toolbar: 2,
          navbar: 0
        };
      }
    }
  },
  name: "Viewer",
  data() {
    return {
      viewer: null
    };
  },
  mounted() {
    this.viewer = new Viewer(this.$refs.preview, this.options);
  },
  methods: {
    clickViewer() {
      this.viewer.show();
      this.viewer.update();
    }
  }
};
</script>
<style scoped></style>
